<template>
  <div>
    <div class="header">
      <response-card title="病毒查杀" num="2196" icon="file-exclamation" />
      <response-card title="勒索病毒" num="1" icon="fire" />
      <response-card title="暴力破解" num="11690" icon="lock" />
      <response-card title="僵尸网络" num="0" icon="cloud-server" />
      <response-card title="Webshell后门" num="4" icon="flag" />
      <response-card title="高级威胁" num="2" icon="pushpin" />
    </div>
    <div>
      <u-button
        :type="tabI === tab.id ? 'primary' : 'default'"
        v-for="(tab, i) in tabs"
        :key="i"
        class="ml-10"
        @click="tabI = tab.id"
        >{{ tab.name }}</u-button
      >
    </div>
    <div style="margin-top: 20px">
      <a-row type="flex" justify="space-between" align="middle">
        <div class="">
          <a-input
            class="search-input"
            v-model="model.queryIp"
            placeholder="终端名称/ip地址"
            allow-clear
            style="width: 190px"
          />

          <a-select
            v-model="model.protocol"
            placeholder="威胁等级"
            style="width: 190px; margin-right: 10px"
            allowClear
          >
            <a-select-option v-for="(item, index) in threaten" :key="index">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-select
            v-model="model.result"
            placeholder="威胁类型"
            class="search-input"
            allowClear
          >
            <a-select-option
              v-for="item in virus"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
          <a-range-picker
            v-model="model.time"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            @change="onChange"
            :placeholder="['自定义开始时间', '自定义结束时间']"
            class="search-input"
            style="width: 340px"
            show-time
          />

          <a-button
            type="primary"
            @click="
              current = 1;
              search();
            "
            >查询
          </a-button>
        </div>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
      rowKey="index"
    >
      <!-- 请求方 -->
      <span slot="requestId" slot-scope="row">
        <div>{{ row.affected_terminal_id }}</div>
        <div class="flex">
          <span
            class="tag"
            :class="{
              high: row.level === '高威胁',
            }"
            >{{ row.level }}</span
          >
          <span class="badge">{{ row.has_virus }}</span>
        </div>
      </span>

      <template slot="action" slot-scope="row">
        <div class="mr-10" @click="process(row);visible = true">
          <span class="button-text">处置</span>
        </div>
      </template>
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
    <a-modal
      title="处置"
      :maskClosable="false"
      :keyboard="false"
      :visible="visible"
      :footer="null"
      centered
      :width="400"
      @cancel="visible = false"
    >
      <a-form
        ref="ruleForm"
        :model="form"
        labelAlign="left"
        layout="horizontal"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="请选择处理方式">
          <a-radio-group v-model="form.file">
            <a-radio :style="radioStyle" :value="1">删除</a-radio>
            <a-radio :style="radioStyle" :value="2">隔离</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div class="flex flex-end mt-10">
        <u-button
          type="default"
          style="font-weight: bold"
          @click="visible = false"
          >取消</u-button
        >
        <u-button class="ml-10 btn-default btn-confirm" @click="confirm">
          确定
        </u-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import ResponseCard from "./components/response-card.vue";
const columns = [
  {
    type: "selection",
    width: 60,
  },
  {
    title: "序号",
    key: "index",
    dataIndex: "index",
  },
  {
    title: "威胁事件",
    key: "requestId",
    scopedSlots: { customRender: "requestId" },
  },

  {
    title: "影响终端",
    key: "affected_terminal_id",
    dataIndex: "affected_terminal_id",
  },
  {
    title: "感染文件",
    key: "infected_file",
    dataIndex: "infected_file",
  },
  {
    title: "发现时间",
    key: "discovery_time",
    dataIndex: "discovery_time",
  },
  {
    title: "处理状态",
    key: "handling_status",
    dataIndex: "handling_status",
  },
  {
    slot: "action",
    title: "操作",
    width: "110px",
    scopedSlots: { customRender: "action" },
  },
];
import Pagination from "@/components/Pagination.vue";
import { warnData } from "../../config/ternimal/data/warn";

export default {
  components: {
    ResponseCard,
    Pagination,
  },
  data() {
    return {
      tabI: 0,
      selectedRowKeys: [],
      radioStyle: {
        height: "30px",
        lineHeight: "30px",
      },
      tabs: [
        {
          id: 0,
          name: "未处理",
        },
        {
          id: 1,
          name: "已处置",
        },
        {
          id: 2,
          name: "已信任",
        },
      ],
      threaten: [
        {
          label: "中威胁",
          value: "中威胁",
        },
        {
          label: "高威胁",
          value: "高威胁",
        },
      ],
      virus: [
        {
          label: "木马病毒",
          value: "木马病毒",
        },
        {
          label: "其他病毒",
          value: "其他病毒",
        },
      ],
      columns,
      loading: false,
      data: warnData,
      page: 10,
      current: 1,
      total: 7,
      model: {
        queryIp: "",
        srcPort: null,
        protocol: undefined,
        dstIp: "",
        dstPort: null,
        result: undefined,
        queryBeginTime: "",
        queryEndTime: "",
        time: undefined,
      },
      form: {
        file: 1,
      },
      visible: false,
      processData: null,
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
    process(val) {
      this.data.processData = val;
    },
    onChange(e) {
      console.log(e);
      if (e[0]) {
        this.model.queryBeginTime = e[0];
        this.model.queryEndTime = e[1];
      } else {
        this.model.queryBeginTime = "";
        this.model.queryEndTime = "";
      }
    },
    onSelectChange(e) {
      this.selectedRowKeys = e;
    },
    confirm() {
      this.$message.success("处置成功");
      this.visible = false;
      this.data.processData.handling_status="已处理"
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.tag {
  margin-right: 4px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 11px;
  color: #fff;
  padding: 4px 6px;
  background-color: #ff8c2f;

  &.high {
    background-color: #ff4d4f;
  }
}

.badge {
  margin-right: 4px;
  border-radius: 12px;
  font-size: 11px;
  color: #ff4d4f;
  padding: 0 4px;
  border: 1px solid #ff4d4f;
  background: #ffe9e4;
}
</style>
